<template>
	<div class="login">
		<Logo></Logo>
		<van-cell-group>
		  	<van-field v-model="form.username"  placeholder="登陆账号"  clearable />
		  	<van-field v-model="form.password" type="password" placeholder="密码"   clearable/>
			<van-button type="primary" size="large" @click="login" :disabled="btn.disabled" :loading="btn.loading" class="mt-15">登陆</van-button>
			<van-cell class="area">
				<div slot="title">
				    <router-link to="register">注册</router-link>
				</div>
				<div slot="right-icon">
					<router-link to="password">忘记密码</router-link>
				</div>
			</van-cell>
		</van-cell-group>
	</div>
</template>
<script>
	import { Field,Button,Cell,CellGroup } from 'vant';

	import Logo from 'touch/components/logo';
	import Va from 'async-validator';

	const formRule = {
	  	username: [
	  		{type: "string", required: true,message :'请填写登录的账号'},
	  		{validator(rule, value, callback, source, options) {
		      	if(!(/^(139|138|137|136|135|134|147|150|151|152|157|158|159|178|182|183|184|187|188|130|131|132|155|156|185|186|145|176|133|153|177|173|180|181|189|170|171)\d{8}$/.test(value))){
	               	callback('登陆账号手机格式错误');
	            }
	            callback();
		    }}
	  	],
	  	password : [
	  		{type : "string" , required: true , message : '请填写登录密码'},
	  		{ min: 6, max: 15,message : '密码长度6-15'}
	  	],
	};

	export default {
		components:{
			Logo,
			[Field.name]: Field,
			[Button.name]: Button,
			[CellGroup.name] : CellGroup,
			[Cell.name] : Cell,
        },
        data (){
	        return{
	            form :{
	            	username : '',
	            	password : '',
	            },
	            va:{
	            	username :{
	            		placeholder : '请填写登录账户',
	            		error : false,
	            	},
	            	password :{
	            		placeholder : '请填写登陆密码',
	            		error : false,
	            	},
	            },
	            btn :{
	            	disabled : false,
	            	loading : false,
	            },
	            formBool : true,
	        }
	    },
	    methods: {
			GetQueryString(name)
			{
			    var reg = new RegExp("(^|&|)"+ name +"=([^&]*)(&|$)");
			    var r = window.location.href.substr(1).match(reg);
			    if(r!=null)return  unescape(r[2]); return null;
			},
			formValidate(){
				this.formBool = true;
				new Va(formRule).validate(this.form, (errors, fields) => {
				  	if(errors) {
				  		this.$toast(errors[0].message);
				  		this.formBool = false;
				  	}
				});
			},
	        login() {
	        	this.formValidate();
	        	if(!this.formBool) return false;
	        	this.btn.disabled = true;
	        	this.btn.loading = true;
	        	var _this = this;
                this.Axios.Auth.Login(this.form)
	            .then(res =>{
                	this.btn.disabled = false;
	        		this.btn.loading = false;
            		if(!res) return false;
            		_this.$toast(res.msg);
                	var returnUrl = '/#/';
                	var path = this.GetQueryString('path');
                	if(path!=null){
                		returnUrl = '/#'+path;
                	}
                	setTimeout(function(){
                		window.location.href=returnUrl;
                	}, 1000);
	            })
	        },
	    },
	}
</script>
<style>
	.login{padding-left: 15px; padding-right: 15px;}
	.login .area a{color: #5cadff;}
</style>